<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <title>黑马头条</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../../plugins/vant/index.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="../../../plugins/css/index.css">
</head>

<body>
<div id="app">
    <div class="article">
        <script>
                        var _authorApUserId= 4
        </script>
        <div style="display:none;">4</div>
            <van-row>
                <van-col span="24" class="article-title" >错失4赛点! 张瑞险遭逆转4-3张本智和妹妹女单夺冠</van-col>
            </van-row>

            <van-row type="flex" align="center" class="article-header">
                <van-col span="3">
                    <van-image round class="article-avatar" src="https://p3.pstatp.com/thumb/1480/7186611868"></van-image>
                </van-col>
                <van-col span="16">
                    <div>admin</div>
                    <div>2022-8-7 16:47:59</div>

                </van-col>
                <van-col span="5">
                    <van-button round :icon="relation.isfollow ? '' : 'plus'" type="info" class="article-focus"
                                :text="relation.isfollow ? '取消关注' : '关注'" :loading="followLoading" @click="handleClickArticleFollow">
                    </van-button>
                </van-col>
            </van-row>
        <van-row class="article-content">
                        <van-col span="24" class="article-text">网易体育8月6日报道：</van-col>
                        <van-col span="24" class="article-text">WTT常规挑战赛突尼斯站继续进行，女单决赛中国选手张瑞对阵日本的张本美和。张瑞先输一局后连赢三局，又被张本美和连扳两局，决胜局错失多达4个赛点的机会才以13-11险胜，最终总比分4-3涉险击败对手获得冠军。</van-col>
                        <van-col span="24" class="article-text">女单张瑞是唯一打进四强的国乒选手，此前她先后淘汰日本名将平野美宇和队友范思琦，半决赛又4-1击败长崎美柚，决赛迎战张本智和的妹妹张本美和。</van-col>
                        <van-col span="24" class="article-text">首局张瑞进入状态稍慢，相持中未能抑制张本美和的频繁上手，上来以1-3落后。张本美和的进攻非常强势，张瑞前半段较为被动，被拉开到2-5。进入中局阶段，张瑞被张本美和继续压制，不过6-9后稳住局面，连得3分追至9-9。两人陷入拉锯战，张瑞错失12-11领先的机会，连丢3分以12-14惜败先输一局。</van-col>
                        <van-col span="24" class="article-text">第二局张瑞前半段依然被动，整体失误偏多，一度3-6落后。张瑞顽强咬住比分，6-9后掀起一波得分高潮，连得5分以11-9逆转扳平比分。第三局张瑞状态被激发，开局取得4-1的领先。张本美和连拿3分4-4，5平、6平后张瑞连丢2分，顶住对手的强攻，与第二局一样打出5-0的攻势，以11-8再下一城。</van-col>
                        <van-col span="24" class="article-text">第四局张瑞越战越勇，上来连续进攻得手5-1领先，可惜未能控制住局面，被张本美和连续反击拿分，优势缩小被追至7-7。张瑞及时抑制住张本美和的反扑，局末通过发球的变化拿下关键分，9-8后再得2分以11-8胜出。</van-col>
                        <van-col span="24" class="article-text">第五局张本美和背水一战频繁搏杀，不过张瑞还是紧追不舍，双方一直拉锯到9平，关键分张瑞错失机会，以9-11输掉这一局。第六局前半段，两人比分继续胶着，8-8后张本美和连拿2分，张瑞追上1个局点后相持打丢，以9-11再负一局。</van-col>
                        <van-col span="24" class="article-text">决胜局张瑞稳住局面，前半段取得5-3的领先。张本美和竭力反扑，张瑞在10-7领先后连输3分，11-10后又错失机会，先后丢掉4个赛点。11平后张本美和反拉滚网出界后反拉再失误，张瑞终于以13-11险胜，总比分4-3惊险击败对手，获得本站比赛女单冠军。</van-col>
                        <van-col span="24" class="article-text">作者：莱昂</van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text"></van-col>
        </van-row>

        <van-row type="flex" justify="center" class="article-action">
            <van-col>
                <van-button round :icon="relation.islike ? 'good-job' : 'good-job-o'" class="article-like"
                            :loading="likeLoading" :text="relation.islike ? '取消赞' : '点赞'" @click="handleClickArticleLike"></van-button>
                <van-button round :icon="relation.isunlike ? 'delete' : 'delete-o'" class="article-unlike"
                            :loading="unlikeLoading" @click="handleClickArticleUnlike">不喜欢</van-button>
            </van-col>
        </van-row>

        <!-- 文章评论列表 -->
        <van-list v-model="commentsLoading" :finished="commentsFinished" finished-text="没有更多了"
                  @load="onLoadArticleComments">
            <van-row id="#comment-view" type="flex" class="article-comment" v-for="(item, index) in comments" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                        <van-col span="3">
                            <van-button round size="normal" v-html="item.reply" @click="showCommentRepliesPopup(item.id)">回复 {{
                                item.reply || '' }}
                            </van-button>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <van-row>
            <van-col span="24" >
                <van-button round size="normal" @click="loadMoreComments">
                    查看更多
                </van-button>
            </van-col>
        </van-row>
    </div>
    <!-- 文章底部栏 -->
    <van-row type="flex" justify="space-around" align="center" class="article-bottom-bar">
        <van-col span="13">
            <van-field v-model="commentValue" placeholder="写评论">
                <template #button>
                    <van-button icon="back-top" @click="handleSaveComment"></van-button>
                </template>
            </van-field>
        </van-col>
        <van-col span="3">
            <van-button icon="comment-o" @click="handleScrollIntoCommentView"></van-button>
        </van-col>
        <van-col span="3">
            <van-button :icon="relation.iscollection ? 'star' : 'star-o'" :loading="collectionLoading"
                        @click="handleClickArticleCollection"></van-button>
        </van-col>
        <van-col span="3">
            <van-button icon="share-o"></van-button>
        </van-col>
    </van-row>

    <!-- 评论Popup 弹出层 -->
    <van-popup v-model="showPopup" closeable position="bottom"
               :style="{ width: '750px', height: '60%', left: '50%', 'margin-left': '-375px' }">
        <!-- 评论回复列表 -->
        <van-list v-model="commentRepliesLoading" :finished="commentRepliesFinished" finished-text="没有更多了"
                  @load="onLoadCommentReplies">
            <van-row id="#comment-reply-view" type="flex" class="article-comment-reply"
                     v-for="(item, index) in commentReplies" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentReplyLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <!-- TODO: js计算时间差 -->
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <!-- 评论回复底部栏 -->
        <van-row type="flex" justify="space-around" align="center" class="comment-reply-bottom-bar">
            <van-col span="13">
                <van-field v-model="commentReplyValue" placeholder="写评论">
                    <template #button>
                        <van-button icon="back-top" @click="handleSaveCommentReply"></van-button>
                    </template>
                </van-field>
            </van-col>
            <van-col span="3">
                <van-button icon="comment-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="star-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="share-o"></van-button>
            </van-col>
        </van-row>
    </van-popup>
</div>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="../../../plugins/js/vue.min.js">
</script>
<script src="../../../plugins/js/vant.min.js"></script>
<!-- 引入 Axios 的 JS 文件 -->
<script src="../../../plugins/js/axios.min.js"></script>
<!-- 页面逻辑 -->
<script src="../../../plugins/js/index.js"></script>
</body>
</html>
